<script setup lang="ts">
import {inject, ref} from "vue";
import {allTitlesApi} from "@/api/allTitles";
import {ElMessage} from "element-plus";
import {allContentsApi} from "@/api/allContents";
import {AllContentsInsDto} from "@/type/allContents";
import {aiChatRequest} from "@/api/aiChat";

const props = defineProps({
  selectTitleId: {
    type: [Number,null],
    required: true
  },
  chatLoading: {
    type: Boolean,
    required: true
  }
});
const emits = defineEmits(['newChat', 'chatAddContent', 'chatContentLoading', 'selectTitle2']);

const textareaValue = ref('')
const newChat = () => {
  emits('newChat')
}

const inject1 = inject<(id: number) => Promise<void>>('selectTitle2Func');

const send = async () => {
  const content = textareaValue.value.trim()
  if (!content) {
    ElMessage.warning('请输入内容')
    return;
  }
  textareaValue.value = ''
  let akdjbadwjk: number
  if (!props.selectTitleId) {
    await allTitlesApi.insertOne({title: '默认标题'});
    const newVar1 = await allTitlesApi.selectAll({});
    akdjbadwjk = newVar1[0].id
    await inject1!(newVar1[0].id)
  } else {
    akdjbadwjk = props.selectTitleId
  }
  // 发送消息 akdjbadwjk 是 title_id

  const allContentsInsDto = new AllContentsInsDto();
  allContentsInsDto.titleId = akdjbadwjk
  allContentsInsDto.role = 'user'
  allContentsInsDto.content = content

  emits('chatAddContent', {
    role: allContentsInsDto.role,
    content: allContentsInsDto.content
  })

  emits('chatContentLoading', true)
  allContentsApi.insertOne(allContentsInsDto).then(res => {
    // 调用ai的接口
    aiChatRequest(akdjbadwjk).then(res => {
      emits('chatAddContent', {
        role: 'system',
        content: res
      })
    }).finally(() => {
      emits('chatContentLoading', false)
    })
  }).catch(() => {
    emits('chatContentLoading', false)
  })
}
</script>

<template>
  <div class="el-button-row" v-loading="props.chatLoading" element-loading-text="思考中...">
    <textarea
      class="ipt"
      v-model="textareaValue"
      placeholder="✨Ask me anything..."
      :rows="3"
      type="textarea"
      @keyup.enter="send"
    />
    <div class="row-right">
      <button @click="send">发送</button>
      <button @click="newChat">新对话</button>
    </div>
  </div>
</template>

<style scoped>

.el-button-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  transition: all 0.3s ease;
}

.el-button-row:hover {
  border-color: #c0c4cc;
}

.ipt {
  width: calc(100% - 32px);
  border: none;
  outline: none;
  font-size: 14px;
  line-height: 1.5;
  padding: 8px 12px;
  resize: none;
  border-radius: 4px;
  background-color: #f5f7fa;
  transition: all 0.3s ease;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif;
}

.ipt:focus {
  background-color: #ffffff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.row-right {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.row-right button {
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #dcdfe6;
  background-color: #ffffff;
  color: #606266;
}

.row-right button:first-child {
  background-color: #409eff;
  color: #ffffff;
  border-color: #409eff;
}

.row-right button:first-child:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.row-right button:last-child:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

/* 加载状态样式 */
.el-button-row .el-loading-mask {
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.9);
}

.el-button-row .el-loading-spinner .el-loading-text {
  color: #409eff;
  font-size: 14px;
}
</style>
